
// @import "weatherNav";
.content-box{
    display: flex;
    flex-direction:column ;
    height: 100%;
}
.main-content-box{
    display: flex;
    flex: 1;
    overflow: hidden;
    
    .left-box{
        width: 20%;
        display: flex;
        flex-direction: column;
        >div{
            flex: 1;
            padding:0 10px;
        }
        .province-box{
            display: flex;
            flex-direction: column;
            ul{
                flex: 1;
                li{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .right-box{
        width: 20%;
        display: flex;
        flex-direction: column;
        >div{
            padding: 0 10px;
            padding-right:0;
        }
        .entry-info{
            max-height: 66%;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            .list-box{
                flex: 1;
                overflow: auto;
                padding-right:10px;
            }   
            ul{
                li{
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    width:100%;
                    height:88px;
                    margin-top: 10px;
                    padding: 12px 10px 18px;
                    background:rgba(20,198,202,0.21);
                    border-radius:6px;
                    color: #fff;
                    font-size: 12px;
                    div{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        button{
                            width:80px;
                            height:24px;
                            background:#2861d6;
                            border-radius:6px;
                            border: 0;
                            outline: 0;
                            color: #fff;
                            font-size: 12px;
                            margin-left: 20px;
                        }
                        h4{
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
            }

        }
        .entry-box{
            flex: 1;
            display: flex;
            flex-direction: column;
        }
    }
    .center-box{
        flex: 4;
        display: flex;
        flex-direction: column;
        margin:0 10px;
        margin-top:20px;
        .world-map{
            flex: 2;
            display: flex;
            flex-direction: column;

            .info-box{
                display: flex;
                text-align: center;
                >div{
                    flex: 1;
                    p{
                        color: #fff;
                        font-size: 18px;
                        font-weight:bold;
                    }
                    .numberStyle{
                        margin: 10px 0
                    }
                    // i{
                    //     display: flex;
                    //     justify-content: center;
                    //     margin: 10px 0;
                    //     span{
                    //         width:28px;
                    //         height:46px;
                    //         margin: 3px;
                    //         background:rgba(64,127,255,0.2);
                    //         border-radius:4px;
                    //         line-height:46px;
                    //         font-size: 38px;
                    //         font-weight: bold;
                    //         color: #FFF000;
                    //     }
                    // }
                }
            }
            .map{
                flex: 1;
            }
        }
        .world-info{
            flex: 1;
            display: flex;
            padding:0 10px;
            background-image: -moz-linear-gradient( 90deg, rgba(126,165,243,.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);
            background-image: -webkit-linear-gradient( 90deg, rgba(126,165,243,0.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);
            background-image: -ms-linear-gradient( 90deg, rgba(126,165,243,0.12) 0%, rgba(107,180,241,0) 11%, rgba(41,233,233,0) 50%, rgba(107,181,241,0) 89%, rgba(126,165,243,0.12) 100%);   
            >div{
                flex: 1;
            }
        }
    }
}
.echarts-box{
    flex: 1;
    width: 100%;
    height: 100%;
}
.radio-box{
    display: flex;
    justify-content: space-around;
    position: relative;
    margin: 0 20px;
    color: #fff;
    &::before{
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 12px;
        z-index: 0;
        height: 1px;
        background: #14C6CA;
    }
    input{
        display: none;
    }
    label{
        display: flex;
        flex-direction: column;
        align-items: center;
        i{
            position: relative;
            z-index: 2;
            width:8px;
            height:8px;
            margin: 8px 0;
            background:rgba(255,255,255,1);
            border-radius:50%;
        }
    }
    input:checked + label {
        color: #14C6CA;
        i{
            width:16px;
            height:16px;
            margin: 4px 0;
            background:rgba(20,198,202,1);
        }
    }
}